<template>
  <view>
    <TopActionBar v-if="0" />
    <PagesContainer has-custom-navbar scroll-container>
      <view class="page-container">
        <u-swiper
          :list="swiperList"
          height="300rpx"
          radius="16rpx"
          indicator
          indicator-mode="dot"
          autoplay
          circular
        />

        <view class="menu-container mt-30rpx">
          <view
            v-for="menu in menuList"
            :key="menu.key"
            class="menu-item col-4"
            @click="handleMenuClick(menu)"
          >
            <u-icon :name="menu.icon" size="60rpx" />
            <text class="menu-text">{{ menu.title }}</text>
          </view>
        </view>
      </view>
    </PagesContainer>
  </view>
</template>

<script lang="ts">
import { map } from 'lodash-es'
import { Component, Vue } from 'vue-property-decorator'

import PagesContainer from '@/components/pages-container/pages-container.vue'
import TopActionBar from '@/components/top-action-bar.vue'
import { userStore } from '@/store'
import { showToast } from '@/utils/helper/uniHelper'

@Component({ name: 'Form', components: { PagesContainer, TopActionBar } })
export default class Form extends Vue {
  swiperList = [
    'https://img.zcool.cn/community/01hue45viofssbjxlegmdn3937.jpg',
    'https://img.zcool.cn/community/01v9zxunw09fuqwytb3lxx3735.jpg'
  ]

  menuList: MenuItem[] = [
    {
      key: 'menu-1',
      title: '信息查询',
      icon: '/static/index/search.png',
      url: '/pages/police_affairs/search',
      type: 'page'
    },
    {
      key: 'menu-2',
      title: '警综平台',
      icon: '/static/index/accident.png',
      url: '/pages/police_affairs/accident',
      type: 'page'
    },
    {
      key: 'menu-3',
      title: '新闻通知',
      icon: '/static/index/news.png',
      url: '/pages/police_affairs/news',
      type: 'page'
    },
    {
      key: 'menu-4',
      title: '情报专栏',
      icon: '/static/index/intelligence.png',
      url: '/pages/police_affairs/intelligence',
      type: 'page'
    },
    {
      key: 'menu-5',
      title: '设置管理',
      icon: '/static/index/admin.png',
      type: 'action'
    }
  ]

  handleMenuClick(item: MenuItem | null) {
    if (!item) return
    if (item.type === 'page' && !item.url)
      return showToast('功能开发中，敬请期待')

    switch (item.type) {
      case 'page':
        uni.navigateTo({
          url: item.url as string
        })
        break
      case 'webview':
        uni.navigateTo({
          url: `/pages/webview/index?url=${item.url}`
        })
        break
      case 'action':
      case 'intelligence':
        this.showActionSheet(item.type)
        break
      default:
        break
    }
  }

  async onLoad() {
    uni.showShareMenu({
      menus: ['shareAppMessage', 'shareTimeline']
    })
  }
  showActionSheet(type: 'action' | 'intelligence') {
    const itemAdmin: any = [
      {
        title: '用户管理',
        url: '/pages/police_affairs/userManage',
        isSuper: true
      },
      {
        title: '情报管理',
        url: '/pages/police_affairs/intelligenceReport',
        isSuper: true
      },
      {
        title: '新闻管理',
        url: '/pages/police_affairs/newsManage',
        isSuper: true
      }
      // {
      //   title: '信息管理',
      //   url: '',
      //   isSuper: true
      // }
    ]
    const itemIntel = [
      {
        title: '情报查询',
        url: ''
      },
      {
        title: '情报上传',
        url: ''
      }
    ]
    wx.showActionSheet({
      itemList: map(type === 'action' ? itemAdmin : itemIntel, 'title'),
      success(e) {
        const url = (type === 'action' ? itemAdmin : itemIntel)[e.tapIndex]?.url
        if (
          (type === 'action' ? itemAdmin : itemIntel)[e.tapIndex]?.isSuper &&
          !['18397871804'].includes(userStore?.authInfo?.phoneNumber || '')
        ) {
          showToast({ title: '您无权限访问' })
          return
        }
        uni.navigateTo({ url })
      }
    })
  }
}
</script>

<style lang="scss" scoped>
.menu-text {
  font-weight: 400;
  font-size: $font-size-sm;
  line-height: 36rpx;
  margin-top: 10rpx;

  color: $color-first-text;
}

.news-list {
  margin-top: $space-base;

  .news-item {
    display: flex;
    padding: $space-base 0;
    border-bottom: 1rpx solid #f2f2f2;

    .news-content {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      height: 160rpx;
      padding: 10rpx 0;

      .news-title {
        font-weight: 500;
        font-size: $font-size-xl;
        line-height: 46rpx;
        color: $color-first-text;
      }

      .news-desc {
        margin-top: 10rpx;
        font-size: $font-size-sm;
        line-height: 36rpx;
        color: $color-third-text;
      }

      .news-info {
        display: flex;
        align-items: center;
        margin-top: 10rpx;

        .news-time {
          font-size: $font-size-xs;
          line-height: 34rpx;
          color: $color-third-text;
        }
      }
    }

    .news-img {
      padding-left: $space-base;
    }
  }
}
</style>
